<template>
	<view>
		<view class="content">
			<view class="input">
				<view class="text">
					手机号
				</view>
				<input type="number" v-model="phone" placeholder-style="color:#C1C1C1" placeholder="请输入手机号">
				<view class="null"></view>
			</view>
			<view class="input">
				<view class="text">
					验证码
				</view>
				<input style="width: 40%;" v-model="code" type="number" placeholder-style="color:#C1C1C1"
					placeholder="输入验证码" />
				<view class="right">
					<view class="code" v-if="codeShow" @tap="handleClickCode">
						发送验证码
					</view>
					<view class="code retry" v-else>
						{{count}}秒后重试
					</view>
				</view>
			</view>
			<view class="login-btn" @click="bindPhoneFn">
				提交
			</view>
		</view>
		<mix-loading v-if="isLoading"></mix-loading>
	</view>
</template>

<script>
	var md5 = require('../../common/js/md5.js')
	export default {
		data() {
			return {
				codeShow: true,
				count: "",
				timer: null,
				phone:'',
				code:'',
				thirdId:''
			};
		},
		onLoad(e) {
			if(e.thirdId) this.thirdId = e.thirdId
		},
		methods:{
			handleClickCode() {
				if (!this.phone) return this.$util.msg('手机号不能为空')
				if (!this.$util.checkStr(this.phone,'mobile')) return this.$util.msg('请输入正确的手机号!')
				this.getCodeFn(this.phone)
			},
			async bindPhoneFn(){
				if (!this.phone) return this.$util.msg('手机号不能为空')
				if (!this.code) return this.$util.msg('验证码不能为空')
				let res = await this.$request('user/bindPhone',{
					phone:this.phone,
					code:this.code,
					thirdId:this.thirdId,
					type:1,
					userIcon:'https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132',
					nickName:'微信用户'
				},{showLoading:true})
				if(res.result == '0'){
					uni.setStorageSync('uid',res.data.uid)
					this.getUserInfo()
					this.switchTab('/pages/tabs/home')
					setTimeout(()=>{
						this.$util.msg('登录成功');
					},1000)
				}else{
					this.$util.msg(res.resultNote)
				}
			},
			async getCodeFn(phone) {
				var timestamp = new Date().getTime()
				var sign = md5.hexMD5(timestamp + 'lixinkeji')
				const res = await this.$request('user/sendSms',{
					phone,
					sign,
					timestamp
				},{showLoading:true})
				if (res.result == '0') {
					this.$util.msg('获取成功')
					console.log(res);
					const TIME_COUNT = 60;
					if (!this.timer) {
						this.count = TIME_COUNT;
						this.codeShow = false;
						this.timer = setInterval(() => {
							if (this.count > 0 && this.count <= TIME_COUNT) {
								this.count--;
							} else {
								this.codeShow = true;
								clearInterval(this.timer);
								this.timer = null;
							}
						}, 1000);
					}
				}else{
					this.$util.msg(res.resultNote)
				}
			},
		},
	}
</script>
<style>
	page{
		background-color: #fff;
	}
</style>
<style lang="scss" scoped> 
	.content {
		padding: 20rpx 45rpx;
	
		.input {
			width: 660rpx;
			height: 110rpx;
			background: #FFFFFF;
			border: 1rpx solid #E5E7EB;
			border-radius: 55rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 36rpx 44rpx;
			box-sizing: border-box;
			margin-bottom: 40rpx;
			font-size: 30rpx;
			color: #101010;
	
			.text {
				font-weight: bold;
			}
	
			input {
				width: 60%;
			}
	
			.null {
				width: 35rpx;
				height: 0;
			}
	
			.right {
				width: 30%;
				font-size: 30rpx;
				font-weight: bold;
				color: #101010;
			}
		}
	
		.login-btn {
			width: 660rpx;
			height: 110rpx;
			background: $uni-color-bg;
			border-radius: 55rpx;
			font-size: 28rpx;
			font-weight: bold;
			color: #FFFFFF;
			line-height: 110rpx;
			text-align: center;
			margin-top: 43rpx;
		}
	}
</style>
